import { Button, Form, Input, message, Select, Upload } from 'antd';
import React, { useEffect, useState } from 'react';
import { Link, withRouter } from 'react-router-dom'
import { UploadOutlined } from '@ant-design/icons';
import Layout from '../../../components/layout'
import stores from '../../../stores';
import { Res } from '../../../types/base';
import $http from '../../../utils/require';
import { RcFile } from '_antd@4.16.0@antd/lib/upload';
import useCategories, { CategoryItem } from '../../../hooks/categories';


const AddProduct = (props: any) => {
    let [categories] = useCategories()
    let [file, setFile] = useState<RcFile>()

    const beforeUpload = (file: RcFile) => {
        console.log(file);
        setFile(file)
        return false
    }
    // console.log('AddProduct', props.location.pathname);
    const onfinish = (values: any) => {
        if (!file) return message.warning('请上传商品图片')
        const formData = new FormData()
        for (const key in values) {
            formData.set(key, values[key])
        }
        if (file) {
            formData.set('photo', file as Blob)
        }

        $http['createProduct']({ userId: stores.User.user._id }, formData).then((res: { name: string }) => {
            message.success(`[${res.name}]商品添加成功！`);
        }).catch((err: Res) => {
            message.error(err.error);
        })
    }

    return (
        <Layout title="添加商品" subtitle="">
            <Form initialValues={{ category: '' }} onFinish={onfinish}>
                <Form.Item>
                    <Upload beforeUpload={beforeUpload} accept="image/*">
                        <Button icon={<UploadOutlined />}>商品封面上传</Button>
                    </Upload>
                </Form.Item>
                <Form.Item name="name" label="商品名称">
                    <Input></Input>
                </Form.Item>
                <Form.Item name="description" label="商品描述">
                    <Input></Input>
                </Form.Item>
                <Form.Item name="price" label="商品价格">
                    <Input></Input>
                </Form.Item>
                <Form.Item name="category" label="所属分类">
                    <Select>
                        <Select.Option value="">请选择分类</Select.Option>
                        {
                            (categories as []).map((el: CategoryItem) => {
                                return <Select.Option value={el._id} key={el._id}>{el.name}</Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="quantity" label="商品数量">
                    <Input></Input>
                </Form.Item>
                <Form.Item name="shipping" label="是否需要运输">
                    <Select>
                        <Select.Option value="1">是</Select.Option>
                        <Select.Option value="0">否</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" htmlType="submit">添加商品</Button>
                </Form.Item>

            </Form>
            <Button><Link to="/admin/dashboard">返回 Dashboard</Link></Button>
        </Layout>
    )
}

export default withRouter(AddProduct)
